<script setup>
import {
  SearchOutlined,
  DeleteOutlined,
  ExclamationCircleFilled,
  SmileOutlined,
  DownOutlined,
  InteractionOutlined,
  SortDescendingOutlined,
  LinkOutlined,
  PictureOutlined,
  IssuesCloseOutlined
} from '@ant-design/icons-vue'
import { reactive, ref } from 'vue'
import { h } from 'vue'
import { message } from 'ant-design-vue'
import editCarouse from '../CarouselManage/EditCarousel/index.vue'
import submitCarouel from '../CarouselManage/submitCarousel/index.vue'
import {
  adminQueryCraouselService,
  adminUpdateCraouselService
} from '@/api/carouse'
const columns = reactive([
  {
    title: '标题',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '是否展示',
    key: 'activeStatus'
  },
  {
    title: '图片',
    key: 'imageUrl',
    dataIndex: 'imageUrl'
  },
  {
    title: '跳转链接',
    key: 'linkUrl',
    dataIndex: 'linkUrl'
  },
  {
    title: '顺序',
    key: 'sortOrder',
    dataIndex: 'sortOrder'
  },
  {
    title: '操作',
    key: 'action'
  }
])
const open = ref(false)
const editRef = ref()
const inputId = ref(0)
const submitref = ref()
const onsubmit = () => {
  open.value = true
  submitref.value.showModal()
}
const onEidt = (item) => {
  editRef.value.showModal()
  inputId.value = item.id
  console.log(inputId.value)
}

const onlink = (linkUrl) => {
  // 使用 window.open 在新标签页中打开链接
  window.open(linkUrl, '_blank')
}
// 自定义图标为红色
const customIcon = h(ExclamationCircleFilled, { style: { color: 'red' } })
const onDelete = async (id) => {
  const res = await adminUpdateCraouselService({
    id,
    deleted: 1
  })
  console.log(res)
}

const deleteActivity = () => {
  // 执行删除逻辑
  message.success('轮播图已删除')
  getCarouselList()
}

const cancelDelete = () => {
  message.info('取消删除操作')
}

const parameterModel = ref({
  pageNo: 1,
  pageSize: 10
})
const formModel = ref([])
//获取轮播图列表
const loading = ref(false)
const getCarouselList = async () => {
  loading.value = true
  const res = await adminQueryCraouselService(parameterModel.value)
  formModel.value = res.data.data.records
  formModel.value.forEach((item) => {
    const tags = []
    item.tags = tags
  })
  loading.value = false
}
getCarouselList()
const handleActiveStatusChange = async (record) => {
  try {
    // 调用更新服务
    console.log(record)
    const res = await adminUpdateCraouselService(record)
    console.log(res)
  } catch (error) {
    // 处理可能出现的错误
    console.error(error)
    record.activeStatus = false
  }
}
defineExpose({ getCarouselList })
</script>

<template>
  <br />
  <div>
    <a-button type="primary" size="large" @click="onsubmit">添加轮播图</a-button>
  </div>
  <br />
  <a-table :columns="columns" :data-source="formModel" :loading="loading">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <SmileOutlined />
          标题
        </span>
      </template>
      <template v-if="column.key === 'activeStatus'">
        <span>
          <IssuesCloseOutlined />
          是否展示
        </span>
      </template>
      <template v-if="column.key === 'imageUrl'">
        <span>
          <PictureOutlined />
          图片
        </span>
      </template>
      <template v-if="column.key === 'linkUrl'">
        <span>
          <LinkOutlined />
          跳转连接
        </span>
      </template>
      <template v-if="column.key === 'sortOrder'">
        <span>
          <SortDescendingOutlined />
          顺序
        </span>
      </template>
      <template v-if="column.key === 'action'">
        <span>
          <InteractionOutlined />
          操作
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name' && record.title !== ''">
        <a>
          {{ record.title }}
        </a>
      </template>
      <template v-else-if="column.key === 'activeStatus'">
        <a-switch v-model:checked="record.activeStatus" checked-children="是" un-checked-children="否"
          @click="handleActiveStatusChange(record)" />
      </template>
      <template v-else-if="column.key === 'imageUrl'">
        <a-image :width="200" :height="100" :src="record.imageUrl" />
      </template>
      <template v-else-if="column.key === 'linkUrl'">
        <a-space wrap>
          <!-- 传递 record.linkUrl 到 onlink 方法 -->
          <a-button type="link" @click="() => onlink(record.linkUrl)">点击跳转</a-button>
        </a-space>
      </template>
      <template v-else-if="column.key === 'sortOrder'">
        <a>
          {{ record.sortOrder }}
        </a>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a-button type="primary" @click="onEidt(record)">
            <template #icon>
              <SearchOutlined />
            </template>
            修改轮播图
          </a-button>
          <h1></h1>
          <a-popconfirm :icon="customIcon" title="确定要删除这个轮播图吗？" okText="确认" cancelText="取消" @confirm="deleteActivity"
            @cancel="cancelDelete">
            <a-button type="primary" danger @click="onDelete(record.id)">
              <template #icon>
                <DeleteOutlined />
              </template>
              撤销轮播图
            </a-button>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            More actions
            <DownOutlined />
          </a>
        </span>
      </template>
    </template>
  </a-table>
  <editCarouse ref="editRef" :input-id="inputId" @open-change="getCarouselList"></editCarouse>
  <submitCarouel ref="submitref" @submit-change="getCarouselList"></submitCarouel>
</template>

<style lang="scss" scoped></style>
